<template>

  <el-main>

    <span>渠道名称:</span>
    <el-input v-model="seachCheckBath.tradeQudao" placeholder="请输入渠道名称"></el-input>
    <span>交易结果:</span>
    <el-select v-model="seachCheckBath.tradeResult" placeholder="请选择">
      <el-option
        v-for="item in tradeResults"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <br>

    <span>对账批次:</span>
    <el-input v-model="seachCheckBath.batchNo" placeholder="请输入对账批次"></el-input>
    <span>交易金额:</span>
    <el-input v-model="seachCheckBath.amount" placeholder="请输入交易金额"></el-input>
    <br>

    <br>
    <span>是否差错:</span>
    <el-select v-model="seachCheckBath.hasDiff" placeholder="请选择">
      <el-option
        v-for="item in hasDiffs"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>

    <span>交易日期:</span>
    <el-date-picker
      v-model="seachCheckBath.startTime"
      type="date"
      value-format="yyyyMMdd"
      placeholder="选择日期">
    </el-date-picker>至
    <el-date-picker
      v-model="seachCheckBath.endTime"
      type="date"
      value-format="yyyyMMdd"
      placeholder="选择日期">
    </el-date-picker>
    <br>
    <span>处理结果:</span>
    <el-select v-model="seachCheckBath.processState" placeholder="请选择">
      <el-option
        v-for="item in processStates"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>

    <span>支付方式:</span>
    <el-select v-model="seachCheckBath.payWay" placeholder="请选择">
      <el-option
        v-for="item in payWaies"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <br>

    <el-button type="primary" @click="list">查询</el-button>



    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="batchNo"
        label="对账批次"
      width="120">
      </el-table-column>
      <el-table-column
        prop="payOrderNo"
        label="交易流水号"
      width="200">
      </el-table-column>
      <el-table-column
        prop="qudaoOrderNo"
        label="渠道订单号"
      width="250">
      </el-table-column>
      <el-table-column
        prop="tradeQudao"
        label="渠道名称">
        <span>拉卡拉</span>
      </el-table-column>
      <el-table-column
        label="交易结果">
        <template slot-scope="scope">
          <span v-if="scope.row.tradeResult==1">处理中</span>
          <span v-if="scope.row.tradeResult==2">成功</span>
          <span v-if="scope.row.tradeResult==3">失败</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="amount"
        label="交易金额">
      </el-table-column>
      <el-table-column
        prop="tradeDateZf"
        label="交易日期"
      width="105">
      </el-table-column>
      <el-table-column
        prop="commissionFee"
        label="手续费">
      </el-table-column>
      <el-table-column
        label="支付方式">
        <template slot-scope="scope">
          <span v-if="scope.row.payWay=='1'">微信支付</span>
          <span v-if="scope.row.payWay=='2'">支付宝扫码</span>
          <span v-if="scope.row.payWay=='3'">微信公众号</span>
          <span v-if="scope.row.payWay=='4'">认证支付</span>
          <span v-if="scope.row.payWay=='5'">代付到银行卡</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="tradeAccount"
        label="交易账号">
      </el-table-column>
      <el-table-column
        label="交易账户类型">
        <template slot-scope="scope">
          <span v-if="scope.row.tradeAccountType=='1'">微信</span>
          <span v-if="scope.row.tradeAccountType=='2'">支付宝</span>
          <span v-if="scope.row.tradeAccountType=='3'">银行卡</span>
          <span v-if="scope.row.tradeAccountType=='4'">拉卡拉</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="checkEndDate"
        label="对账完成时间"
      width="100">
      </el-table-column>
      <el-table-column
        label="是否差错">
        <template slot-scope="scope">
          <span v-if="scope.row.hasDiff=='0'">否</span>
          <span v-if="scope.row.hasDiff=='1'">是</span>
        </template>
      </el-table-column>
      <el-table-column
        label="处理结果">
        <template slot-scope="scope">
          <span v-if="scope.row.processState=='1'">未处理</span>
          <span v-if="scope.row.processState=='2'">要结算</span>
          <span v-if="scope.row.processState=='3'">不结算</span>
          <span v-if="scope.row.processState=='4'">已处理</span>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page=seachCheckBath.pageNum
      :page-sizes="[1, 3, 5, 10]"
      :page-size=seachCheckBath.pageSize
      layout="total, sizes, prev, pager, next, jumper"
      :total=total>
    </el-pagination>

  </el-main>

</template>

<script>

import {listcheckbatchdetail} from "@/api/finance/checkforthedetail"

export default {
  data() {
    return {
      tableData: [],
      seachCheckBath:{
        pageNum:1,
        pageSize:10,
        batchNo:undefined
      },
      total:null,
      //交易结果：接口回调或者返回的结果 1:处理中，2:成功，3:失败。
      tradeResults:[
        {label:"处理中",value:"1"},
        {label:"成功",value:"2"},
        {label:"失败",value:"3"}
      ],
      //支付方式,同流水里面一样 1:微信扫码，2:支付宝扫码，3:微信公众号，4:认证支付，5:代付到银行卡
      payWaies:[
        {label:"微信扫码",value:"1"},
        {label:"支付宝支付",value:"2"},
        {label:"微信公众号",value:"3"},
        {label:"认证支付",value:"4"},
        {label:"代付到银行卡",value:"5"}
      ],
      //是否差错
      hasDiffs:[
        {label:"否",value:"0"},
        {label:"是",value:"1"},
      ],
      //处理结果
      processStates:[
        {label:"未处理",value:"1"},
        {label:"要结算",value:"2"},
        {label:"不结算",value:"3"},
        {label:"已处理",value:"4"},
      ],
      batchNo:''
    }
  },
  methods:{
    list(){
      listcheckbatchdetail(this.seachCheckBath).then(res=>{
        console.log(res);
        this.tableData = res.msgData.records;
        this.seachCheckBath.pageNum = res.msgData.current;
        this.seachCheckBath.pageSize = res.msgData.size;
        this.total = res.msgData.total;
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.seachCheckBath.pageSize = val;
      this.seachCheckBath.pageNum = 1;
      this.list()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.seachCheckBath.pageNum = val;
      this.list();
    }
  },
  created() {
    let batchNo = this.$route.params.batchNo;
    console.log("-----",batchNo);
    if (batchNo!=undefined){
      this.seachCheckBath.batchNo = batchNo;
    }
    this.list();
  }
}
</script>

<style scoped>
.el-input{
  width: 200px;
}
</style>
